<template>
	<view class="page">
		<!-- 就诊人切换 -->
		<ChangePatient></ChangePatient>
		<!-- 状态栏 -->
		<view class="statusbar">
			<view class="status" :class="{active:statusFree==0}" @click="changesta(0)">
				检查
			</view>
			<view class="status" :class="{active:statusFree==1}" @click="changesta(1)">
				检验
			</view>
		</view>
		<!-- 状态内容切换 -->
		<view class="status_content">
			<!-- 检查 -->
			<view class="checklists" v-if="statusFree==0">
				<view class="checklist" @click="checkdetail">
					<view class="conTitle">
						<view class="check_name">
							双肾及肾血管彩色多普勒
						</view>
						<view class="report_status">
							报告已出
						</view>
					</view>
					<view class="report_time">
						报告时间：2020-01-01 10:20:36
					</view>
				</view>
				<view class="checklist" @click="checkdetail">
					<view class="conTitle">
						<view class="check_name">
							上腹部CT平扫
						</view>
						<view class="report_status">
							报告已出
						</view>
					</view>
					<view class="report_time">
						报告时间：2020-01-01 10:20:36
					</view>
				</view>
				<view class="checklist" @click="noreleased">
					<view class="conTitle">
						<view class="check_name">
							核磁共振
						</view>
						<view class="report_status" style="background-color: rgba(255, 241, 240, 1);color: #FF4D4F;">
							报告未出
						</view>
					</view>
					<view class="report_time">
						报告时间：--
					</view>
				</view>
			</view>
			<!-- 检验 -->
			<view class="checklists" v-if="statusFree==1">
				<view class="checklist" @click="testdetails">
					<view class="conTitle">
						<view class="check_name">
							血常规
						</view>
						<view class="report_status">
							报告已出
						</view>
					</view>
					<view class="report_time">
						报告时间：2020-01-01 10:20:36
					</view>
				</view>
				<view class="checklist" @click="noreleased">
					<view class="conTitle">
						<view class="check_name">
							肝功三项
						</view>
						<view class="report_status" style="background-color: rgba(255, 241, 240, 1);color: #FF4D4F;">
							报告未出
						</view>
					</view>
					<view class="report_time">
						报告时间：--
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

	
	// 缴费状态切换
	const statusFree = ref(0)
	const changesta = (sta) => {
		statusFree.value = sta
	}
	// 检查报告已出
	const checkdetail = () => {
		uni.navigateTo({
			url:'/pages/Report_Details/Report_Details'
		})
	}
	// 检验报告已出
	const testdetails = () => {
		uni.navigateTo({
			url:'/pages/Inspection_Details/Inspection_Details'
		})
	}
	// 报告未出
	const noreleased = () => {
		uni.showToast({
			title:'该报告暂时无法查看',
			icon:'none'
		})
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: rgba(242, 242, 242, 1);
		min-height: 100vh;
		padding: 26rpx 25rpx 0;
		box-sizing: border-box;
		// 就诊人切换
		.patient{
			width: 100%;
			height: 88rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding:  0 40rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.peopleInfo{
				display: flex;
				align-items: center;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				height: 44rpx;
				.name{
					font-size: 32rpx;
				}
				.patient_card{
					color: #aaa;
					margin-left: 44rpx;
				}
			}
			.operate{
				display: flex;
				align-items: center;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 32rpx;
				color: #000;
				cursor: pointer;
				.qie{
					margin-left: 12rpx;
				}
			}
		}
		// 就诊人切换弹出层
		.popup{
			
			.popup-content {
				// display: flex;
				// flex-direction: column;
				// align-items: center;
				// justify-content: center;
				border-radius: 72rpx 72rpx 0 0;
				padding: 30rpx 45rpx 0;
				box-sizing: border-box;
				height: 804rpx;
				background-color: #fff;
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				position: relative;
				.title{
					font-size: 32rpx;
					font-weight: 700;
					width: 100%;
					text-align: center;
				}
				.close{
					width: 32rpx;
					position: absolute;
					right: 45rpx;
					cursor: pointer;
					top: 38rpx;
				}
				
				.patientlists{
					margin-top: 60rpx;
					.patientlist{
						width: 660rpx;
						height: 92rpx;
						border-radius: 16rpx;
						padding: 0 30rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						background-color: rgba(230, 244, 255, 1);
						font-size: 28rpx;
						font-family: 'Microsoft YaHei UI', sans-serif;
						margin-bottom: 40rpx;
						.patient_card{
							margin-left: 20rpx;
							color: #aaa;
						}
					}
				}
				.addpatient{
					width: 660rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 28rpx;
					color: #fff;
					background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E9%97%A8%E8%AF%8A%E6%8C%82%E5%8F%B7/u579.svg');
					background-size: cover;
					position: absolute;
					bottom: 40rpx;
				}
			}
		}
		// 状态栏
		.statusbar{
			width: 100%;
			height: 82rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			overflow: hidden;
			border-radius: 16rpx;
			margin: 30rpx 0;
			.status{
				width: 50%;
				height: 82rpx;
				line-height: 82rpx;
				text-align: center;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				color: #000;
				cursor: pointer;
			}
			.active{
				background-color: rgba(22, 119, 255, 1);
				color: #fff;
			}
		}
		// 状态内容切换
		.status_content{
			// 检查
			.checklists{
				.checklist{
					width: 100%;
					height: 170rpx;
					background-color: #fff;
					border-radius: 16rpx;
					padding-top: 30rpx;
					padding-right: 28rpx;
					box-sizing: border-box;
					margin-bottom: 30rpx;
					.conTitle{
						display: flex;
						height: 42rpx;
						align-items: center;
						justify-content: space-between;
						font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI', sans-serif;
						font-size: 28rpx;
						color: #000;
						.check_name{
							padding-left: 28rpx;
							font-weight: 700;
							position: relative;
						}
						.check_name::before{
							content: '';
							width: 8rpx;
							height: 36rpx;
							background-color: rgba(22, 119, 255, 1);
							border-radius: 16rpx;
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
						}
						.report_status{
							width: 106rpx;
							height: 42rpx;
							line-height: 42rpx;
							border-radius: 4rpx;
							text-align: center;
							background-color: rgba(230, 255, 251, 1);
							color: #13C2C2;
							font-size: 24rpx
						}
					}
					.report_time{
						font-family: 'Microsoft YaHei UI', sans-serif;
						color: #AAAAAA;
						font-size: 24rpx;
						padding-left: 28rpx;
						margin-top: 26rpx;
					}
				}
			}
		}
	}
</style>